1 00:00:00,660 --> 00:00:09,150 Helo our Welcome to this lecture in this lecture we are going to be Kree team this structure for our 2 00:00:09,150 --> 00:00:12,480 app using hastier mail. 3 00:00:12,870 --> 00:00:15,730 So this is our blank page here mail. 4 00:00:15,740 --> 00:00:22,610 I have already written the hastier male code for this for this project so I'm going to do. 5 00:00:22,620 --> 00:00:31,010 I'm going to actually copy the code in and then explain each of each line of code step by step. 6 00:00:31,170 --> 00:00:36,290 There'll be a lot easier than you watching me type. 7 00:00:36,320 --> 00:00:36,780 All right. 8 00:00:36,780 --> 00:00:40,530 This is the hastier mail for our project. 9 00:00:40,560 --> 00:00:43,190 So let me explain the code. 10 00:00:43,440 --> 00:00:50,670 So line one here is for first thing you have to indicate in an hastier middle document. 11 00:00:50,760 --> 00:00:58,710 This is the doctype which it tells the web browser that the document you are about to display is an 12 00:00:58,710 --> 00:01:01,670 hastier mail five document. 13 00:01:02,250 --> 00:01:09,740 So that's what one does line two is did begin in where the documents truly starts. 14 00:01:09,780 --> 00:01:19,290 So it begins with a hate mail tag and in between inside the tag pad and an attribute cord Lang basically 15 00:01:19,320 --> 00:01:22,550 that tells a browser what language this is. 16 00:01:22,560 --> 00:01:30,890 So the value is English which how specifying would be when specify an attribute you need to enclose 17 00:01:30,890 --> 00:01:34,410 a value in quotes as I've done here. 18 00:01:34,410 --> 00:01:42,150 So every tag most tags have an opening an enclosed in tags so this is the whole plane. 19 00:01:42,170 --> 00:01:52,750 It's multipack online to the start of the same old document line 22 is the end tag which shows anything 20 00:01:52,770 --> 00:01:57,910 between the hastier month tax is going to be rendered by the web browser. 21 00:01:57,950 --> 00:02:03,730 And his team mail documents what that means. 22 00:02:03,950 --> 00:02:12,200 Line 3 to line 12 is the head tag inside the head tag. 23 00:02:12,210 --> 00:02:18,640 You have various tags the information the head tag is not visible. 24 00:02:18,780 --> 00:02:29,340 You can't see it but the search engine uses that information to display data or to serve a request that 25 00:02:29,340 --> 00:02:30,860 someone's looking for. 26 00:02:31,110 --> 00:02:34,960 So we've got a few member tags here inside the head. 27 00:02:34,980 --> 00:02:39,710 Also notice how higher indented each of the code. 28 00:02:39,990 --> 00:02:49,390 So it tells you that the head and the body are children of a seer male tech. 29 00:02:49,550 --> 00:02:53,000 The Meadow tags are children of the head tag. 30 00:02:53,040 --> 00:02:56,130 The link is a child of the head tag. 31 00:02:56,280 --> 00:02:58,370 And me bring that up a bit. 32 00:02:58,600 --> 00:03:05,280 Also the hey one tag all these ones are children of the body. 33 00:03:05,550 --> 00:03:09,390 So the indentation in the kids who are the parent. 34 00:03:09,450 --> 00:03:12,290 It's all right. 35 00:03:12,300 --> 00:03:16,770 The metzer tag basically are used for information purposes. 36 00:03:16,800 --> 00:03:18,540 This may be a car set here. 37 00:03:18,600 --> 00:03:25,740 Basically they've indicated to allow tribute and the value is utf 8 utf dash. 38 00:03:25,770 --> 00:03:32,310 It basically is the standard Unicode standards or the characters that we're going to use are going to 39 00:03:32,310 --> 00:03:35,270 be readable by most or web browser. 40 00:03:35,270 --> 00:03:42,560 So this utf is a standard code that is title here and because the title. 41 00:03:42,570 --> 00:03:51,380 So in case there's title always show up when the web page is launched they made a name here. 42 00:03:51,450 --> 00:03:57,650 Again there's some other attribute where you can specify the value of description way. 43 00:03:57,860 --> 00:04:02,100 And there is two tag two attributes here. 44 00:04:02,100 --> 00:04:04,840 One is the name for this metal tag. 45 00:04:04,990 --> 00:04:10,280 It values description and then there's another idea here called content. 46 00:04:10,370 --> 00:04:16,300 The value is the name of my app or what app does. 47 00:04:16,320 --> 00:04:22,650 So it's useful for these search engines because someone is looking for an app that does something like 48 00:04:22,650 --> 00:04:27,460 that that will guide them to this page. 49 00:04:27,600 --> 00:04:35,550 The tag on line 7 here is called value an attribute of name and value of viewport is basically enables 50 00:04:35,550 --> 00:04:43,840 this page to be viewed by any device either a mobile device or a tablet regardless of the screen size. 51 00:04:43,950 --> 00:04:47,670 It will adapt to fit that screen size. 52 00:04:47,670 --> 00:04:49,590 That's basically what this is. 53 00:04:49,940 --> 00:04:55,420 And the content here again the with equal to device minus who with. 54 00:04:55,710 --> 00:04:58,170 And then this is the initial desco. 55 00:04:58,260 --> 00:04:59,630 So did is zoom. 56 00:04:59,760 --> 00:05:08,310 How you can zoom so Danishes one starts with one and then you can zoom to skill to your relevant screen 57 00:05:08,310 --> 00:05:09,270 size and physically. 58 00:05:09,270 --> 00:05:10,720 That's what this is. 59 00:05:10,800 --> 00:05:18,360 Okay so that without the Line 7 it would be difficult to view this page on any device so you can only 60 00:05:18,380 --> 00:05:20,960 probably views on a standard screen. 61 00:05:20,970 --> 00:05:29,060 But with this it will adapt to any screen size that is used to view this speech line. 62 00:05:29,220 --> 00:05:34,170 Here is just a link to the style sheet I'll use in wishes. 63 00:05:34,170 --> 00:05:35,380 This style sheet here. 64 00:05:35,380 --> 00:05:37,530 So that's just a reference to the link. 65 00:05:37,830 --> 00:05:40,090 So that's the end of the ed section. 66 00:05:40,080 --> 00:05:42,840 Then let's move over to the body section. 67 00:05:42,840 --> 00:05:44,640 This is a body section here. 68 00:05:44,730 --> 00:05:52,680 Any content in the body section is the only content that you can see or visitors can see when they visit 69 00:05:52,770 --> 00:05:53,480 the page. 70 00:05:53,490 --> 00:06:02,550 So the visible content of a web page is inside the in between the body inside the body tag hive's specifies 71 00:06:02,550 --> 00:06:04,980 some child elements here. 72 00:06:04,980 --> 00:06:09,450 So child tags here one tag basically is ahead in tag. 73 00:06:09,690 --> 00:06:14,870 And this is a text who will show up the tag and then I've got an input tag. 74 00:06:14,880 --> 00:06:16,700 This given it an idea. 75 00:06:16,710 --> 00:06:17,660 Here it is Heidi. 76 00:06:17,680 --> 00:06:26,170 I will use later for styling the value of the idea here is acor which is short for four string. 77 00:06:26,620 --> 00:06:34,990 And then I want the value inside that this input will be given the value of blanks or not two be today 78 00:06:35,030 --> 00:06:39,790 if I won it all the included text How pleased that in between those quotes. 79 00:06:39,810 --> 00:06:41,490 Here I want it to be blank. 80 00:06:41,760 --> 00:06:48,090 So I have just left the quotes there and then the type is say text texel what I want to going here is 81 00:06:48,090 --> 00:06:51,550 this text as well specified here. 82 00:06:51,580 --> 00:06:59,880 I have created another Deve here which will act as an output so whatever is typed in here will output 83 00:07:00,000 --> 00:07:07,060 to the deep here and given the Deve idea of the value output. 84 00:07:07,170 --> 00:07:08,250 So did leave here. 85 00:07:08,250 --> 00:07:16,450 Well sure the output has been imported inside this inside this input box here. 86 00:07:17,010 --> 00:07:23,200 I have also created a button on line 17 so this is how you create a button. 87 00:07:23,340 --> 00:07:34,840 Given the button an A D equals two but b t n no d attributes always have to have their values in quotes. 88 00:07:35,340 --> 00:07:44,610 In between the button tag I added a wish to tag to display the text that the button will display and 89 00:07:44,610 --> 00:07:46,600 then I have closed the button tag. 90 00:07:46,610 --> 00:07:52,380 There are right to notice I've embedded two separate tags in one here. 91 00:07:52,520 --> 00:07:55,190 And notice how I have closed them properly. 92 00:07:55,210 --> 00:08:03,700 Have close the page to first here before closing the button because the button came first and then the 93 00:08:03,700 --> 00:08:07,580 script followed the script just before duclos embody tag. 94 00:08:07,580 --> 00:08:14,300 It's always good to insert your script there so that they be fully lohse before your script is executed. 95 00:08:14,470 --> 00:08:20,560 All right so this javascript here this is where it will reference it from. 96 00:08:20,580 --> 00:08:24,270 So that's it for our app structure. 97 00:08:24,270 --> 00:08:25,430 This is the dock. 98 00:08:25,450 --> 00:08:33,480 This is the code to create the app structure so I just click on saved to make sure it is say click save 99 00:08:33,560 --> 00:08:37,700 all or DAS the structure of the app. 100 00:08:38,040 --> 00:08:39,720 That's it for this year. 101 00:08:39,780 --> 00:08:41,010 Thank you so much. 102 00:08:41,010 --> 00:08:41,850 Take care. 103 00:08:41,850 --> 00:08:43,170 Bye for now. 104 00:08:43,200 --> 00:08:46,770 Any questions please do not hesitate to ask. 105 00:08:46,810 --> 00:08:48,790 I'll be more than happy to help.